import React, { useCallback } from 'react'
import Captcha from 'react-captcha-code';
import { Toast } from 'react-vant'
import { Button, Form, Input } from 'antd-mobile'
import axios from "axios";
import { useNavigate } from 'react-router-dom'
// import Three from "../components/Three";

export default () => {
    const [form] = Form.useForm()
    const navigator = useNavigate()
    const onFinish = (values: any) => {
        console.log(values)
        axios.post("http://localhost:3002/login", values).then((res) => {
            const data = localStorage.setItem('token', res.data.code)
            console.log(data);
            console.log(res);
            if (res.data.code === 200) {
                navigator('/index/my')
            } else {
                Toast.info('密码或用户名错误')
            }
        });
    }
    const reg = () => {
        navigator('/reg')
    }
    const handleClick = useCallback((captcha: any) => {
        console.log('captcha:', captcha);
    }, []);
    return (
        <div className=''>
            <Form
                form={form}
                onFinish={onFinish}
                // onChange={logind}
                footer={
                    <><div style={{ margin: '16px 16px 0' }}>
                        <Button block type='submit' color='primary' size='large'>
                            登录
                        </Button>
                    </div><div style={{ margin: '16px 16px 0' }}>
                            <Button block onClick={reg} color='primary' size='large'>
                                去注册
                            </Button>
                        </div>
                    </>
                }>
                <Form.Item
                    name='username'
                    label='用户名'>
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item
                    name='password'
                    label='密码'>
                    <Input placeholder='请输入密码' />
                </Form.Item>
                <Form.Item
                    name='yzm'
                    label='验证码'>
                    <Input placeholder='请输入验证码' /><Captcha charNum={4} onChange={handleClick} />
                </Form.Item>
            </Form>
            {/* <div style={{ marginTop: "20px", textAlign: "center", }}>
                <a href='/reg' style={{ fontSize: "15px", color: '#50b7c1' }}>去注册</a>
            </div> */}
            {/* <Three></Three> */}
        </div >
    )
}
